<script setup>
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { onMounted, reactive, ref } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const feedbackCode = ref(route.params.id)
const feedbackInfo = reactive({})
const customerResp = ref(null)
const evaluateResps = ref(null)

const isModalOpen = ref(false)
const currentImage = ref('')

function openImage(url) {
  currentImage.value = url
  isModalOpen.value = true
}

function closeModal() {
  isModalOpen.value = false
}

// 将图片URL分割成数组
const feedbackImgUrls = computed(() => {
  if (!feedbackInfo.feedbackImgFile) {
    return []
  }
  return feedbackInfo.feedbackImgFile.split('&&') // 分割URL字符串
})

async function fetchData() {
  try {
    const response = await axios.post('https://www.cqwuyang.cn/ElectricManageService/feedback/getFeedbackInfo', {
      feedbackCode: feedbackCode.value,
    })
    if (response.data) {
      console.log('上报详情页面：', response.data)
      Object.assign(feedbackInfo, response.data.data)
      feedbackImgUrls()
      console.log('feedbackInfo', feedbackInfo)
    }
  }
  catch (error) {
    console.error('获取数据时出错:', error)
  }
}

function getFeedbackClassification(classification) {
  const classifications = {
    1: '海康',
    2: '业主上报',
    3: '所有',
  }
  return classifications[classification] || '未知'
}

function getFeedbackState(state) {
  const states = {
    1: '待处理',
    2: '驳回',
    3: '留观',
    4: '已处置',
  }
  return states[state] || '未知'
}

function getFeedbackType(type) {
  const types = {
    1: '预警',
    2: '故障',
    3: '其他',
  }
  return types[type] || '未知'
}

onMounted(() => {
  fetchData()
})
</script>

<template>
  <div class="feedback-page">
    <!-- 基本信息 -->
    <div class="card">
      <h3>基本信息</h3>
      <p>上报编号：<span>{{ feedbackInfo.feedbackCode }}</span></p>
      <p>创建时间：<span>{{ feedbackInfo.createDate }}</span></p>
      <p>上报内容：<span>{{ feedbackInfo.feedbackContent }}</span></p>
    </div>

    <!-- 客户信息 -->
    <div class="card">
      <h3>客户信息</h3>
      <p>客户编号：<span>{{ feedbackInfo.customerCode }}</span></p>
      <p>客户名称：<span>{{ feedbackInfo.customerName }}</span></p>
      <p>联系人姓名：<span>{{ feedbackInfo.customerUserName }}</span></p>
      <p>联系人电话：<span>{{ feedbackInfo.customerUserPhone }}</span></p>
    </div>

    <!-- 地址信息 -->
    <div class="card">
      <h3>地址信息</h3>
      <p>上报地址：<span>{{ feedbackInfo.feedbackAddress }}</span></p>
      <p>城市：<span>{{ feedbackInfo.feedbackCity }}</span></p>
      <p>省份：<span>{{ feedbackInfo.feedbackProvince }}</span></p>
      <p>地区：<span>{{ feedbackInfo.feedbackRegion }}</span></p>
      <p>经纬度：<span>{{ feedbackInfo.feedbackLatitude }}, {{ feedbackInfo.feedbackLongitude }}</span></p>
    </div>

    <!-- 上报来源与状态 -->
    <div class="card">
      <h3>上报来源与状态</h3>
      <p>上报来源：<span>{{ getFeedbackClassification(feedbackInfo.feedbackClassification) }}</span></p>
      <p>上报状态：<span>{{ getFeedbackState(feedbackInfo.feedbackState) }}</span></p>
      <p>上报类型：<span>{{ getFeedbackType(feedbackInfo.feedbackType) }}</span></p>
    </div>

    <!-- 海康设备信息 -->
    <div v-if="feedbackInfo.feedbackClassification === 1" class="card">
      <h3>海康设备信息</h3>
      <p>设备序列号：<span>{{ feedbackInfo.feedbackHikDeviceSerial || "暂无数据" }}</span></p>
      <p>设备类型：<span>{{ feedbackInfo.feedbackHikDeviceType || "暂无数据" }}</span></p>
      <p>首次报警时间：<span>{{ feedbackInfo.feedbackHikFirstDate || "暂无数据" }}</span></p>
      <p>最新报警时间：<span>{{ feedbackInfo.feedbackHikNewDate || "暂无数据" }}</span></p>
    </div>

    <!-- 附件信息 -->
    <div v-if="feedbackInfo.feedbackClassification === 2" class="card">
      <h3>附件信息</h3>

      <!-- 图片附件 -->
      <p>图片附件：</p>
      <div class="image-container">
        <img v-for="(url, index) in feedbackImgUrls" :key="index" :src="url" alt="图片附件" class="attachment-image">
      </div>

      <!-- 视频附件 -->
      <p>视频附件：</p>
      <video v-if="feedbackInfo.feedbackVideoFile" controls class="attachment-video">
        <source :src="feedbackInfo.feedbackVideoFile" type="video/mp4">
        您的浏览器不支持视频播放
      </video>
      <p v-else>
        暂无数据
      </p>

      <!-- 语音附件 -->
      <p>语音附件：</p>
      <audio v-if="feedbackInfo.feedbackVoiceFile" controls class="attachment-audio">
        <source :src="feedbackInfo.feedbackVoiceFile" type="audio/mpeg">
        您的浏览器不支持音频播放
      </audio>
      <p v-else>
        暂无数据
      </p>
    </div>

    <!-- 备注 -->
    <div class="card">
      <h3>备注</h3>
      <p>{{ feedbackInfo.feedbackRemarks || "暂无备注" }}</p>
    </div>
  </div>
</template>

<style scoped>
.feedback-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

.card {
  padding: 16px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.card h3 {
  margin-bottom: 12px;
}

.card p {
  margin: 4px 0;
}

.card span {
  font-weight: bold;
}

.image-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.attachment-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.attachment-video,
.attachment-audio {
  display: block;
  width: 100%;
  max-width: 400px;
  margin-top: 8px;
}
</style>
